<template>
	<table class="table table-hover">
		<thead>
			<tr>
				<th>{{ $t('username') }}</th>
				<th>{{ $t('nick') }}</th>
				<th>{{ $t('status') }}</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in members" :key="item.username" @click="toUserPage(item.userId)"
				@contextmenu.prevent="toUserPage(item.userId, true)">
				<td class="link-color">
					{{ item.username }}
				</td>
				<td>{{ item.usernick }}</td>
				<td :class="item.auditClass">
					{{ item.auditString }}
				</td>
			</tr>
		</tbody>
	</table>
</template>

<script type="module">
import { GroupService, Router } from '@/common/common.object'

const auditMapping = {
	0: {
		name: "待审核",
		class: "c-primary",
	},
	1: {
		name: "已通过",
		class: "c-green",
	},
	2: {
		name: "未通过",
		class: "c-red",
	},
};


export default {
	inject: ['groupId', 'group'],
	data() {
		return {
			members: null,
		};
	},
	created() {
		GroupService.getMembers(this.groupId).then(result => {
			result.forEach(item => {
				let status = auditMapping[item.audit];

				item.auditString = status.name;
				item.auditClass = status.class;
			});

			this.members = Object.freeze(result);
		});
	},
	methods: {
		toUserPage(userId, onNewPage = false) {
			this.$toPage(Router.page.user.judgeInfo(userId), onNewPage);
		},
	},
};
</script>

<style scope>
table {
	box-sizing: none;
}

table>thead>tr>th {
	border-top: none !important;
}

table>tbody>tr {
	cursor: pointer;
}

table>tbody>tr>td {
	vertical-align: middle !important;
}
</style>
